<template>
    <div>
      <div class="weather-day">
        <zz-weather class="left" :weatherType="todayWeather.firstImgTitle" fontSize="48px"></zz-weather>
        <div class="left todayWeather-time">
          <p>{{this.todayWeather.firstImgTitle}}，{{todayWeather.firstTemp}}</p>
          <p class="mt10">{{time}}</p>
        </div>
      </div>
      <div class="weather-pm">
        <div class="left">
          <div class="clear">
            <div class="left weather-normal" :class="{'weather-warning-icon': isPmTenWarning, 'weather-alarm-icon': isPmTenAlarm}">
              <i class="iconfont icon-PM"></i><span class="icontDes">PM10</span>
            </div>
            <p class="right weather-text">{{environmentalInfo.pmTen}}ug/m³</p>
          </div>
          <div class="weather-pm10-bar relative weather-normal-bar" :class="{'weather-warning-bar': isPmTenWarning, 'weather-alarm-bar': isPmTenAlarm}">
            <div class="absolute weather-pm10-com" :style="{width: `${pmTenWidth}%`}"></div>
          </div>
        </div>
        <div class="right">
          <div class="clear">
            <div class="left weather-normal" :class="{'weather-warning-icon': isPmTwoWarning, 'weather-alarm-icon': isPmTwoAlarm}">
              <i class="iconfont icon-PM"></i><span class="icontDes">PM2.5</span>
            </div>
            <p class="right weather-text">{{environmentalInfo.pmTwoPiontFive}}ug/m³</p>
          </div>
          <div class="weather-pm25-bar relative weather-normal-bar" :class="{'weather-warning-bar': isPmTwoWarning, 'weather-alarm-bar': isPmTwoAlarm}">
            <div class="absolute weather-pm25-com" :style="{width: `${pmTwoPointFiveWidth}%`}"></div>
          </div>
        </div>
      </div>
      <div class="weather-other clear">
        <div class="left" style="width: 60px">
          <p>风向</p>
          <p>{{todayWeather.wd}}</p>
        </div>
        <div class="left" style="width: 100px">
          <p>风速</p>
          <p>{{todayWeather.ws}}</p>
        </div>
        <div class="left" style="width: 100px;" :style="{color: noiseColor}">
          <p>噪声</p>
          <p>{{environmentalInfo.noise}}dB</p>
        </div>
        <div class="left" style="width: 95px;">
          <p>温度</p>
          <p>{{todayWeather.currentTemp}}℃</p>
        </div>
        <div class="left" style="width: 65px;">
          <p>湿度</p>
          <p>{{todayWeather.sd}}</p>
        </div>
      </div>
      <div class="weather-after">
        <span class="left" style="margin-right: 15px">明后两天:</span>
        <zz-weather :weatherType="todayWeather.secondImgTitle" font-size="24px" style="margin-right: 15px"></zz-weather>
        <zz-weather :weatherType="todayWeather.thirdImgTitle" font-size="24px"></zz-weather>
      </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'weather',
    data () {
      return {
        time: '',
        todayWeather: {},
        environmentalInfo: {
          pmTen: 0,
          noise: 0,
          pmTwoPiontFive: 0
        },
        noiseColor: '',
        noiseWarn: 0,
        pmTenWidth: 0,
        pmTwoPointFiveWidth: 0,
        isPmTwoWarning: false,
        isPmTwoAlarm: false,
        isPmTenWarning: false,
        isPmTenAlarm: false,
        noiseAlarm: 0
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser',
        incomingProjectBroadcastNode: 'incomingProjectBroadcastNode'
      })
    },
    mounted () {
      this.setTime()
      this.weatherForecast()
      if (!this.weatherInterval) {
        this.weatherInterval = setInterval(() => {
          this.weatherForecast()
        }, 1000 * 60 * this.$pollingTime)
      }
    },
    activated () {
      this.weatherForecast()
    },
    watch: {
      currentUser (oldItem, newItem) {
        if (this.currentUser.mid) {
          this.weatherForecast()
        }
      },
      incomingProjectBroadcastNode (item) {
        if (this.$route.name === 'projectVideo') {
          this.incomingProjectNode(item)
        }
      }
    },
    methods: {
      setTime () {
        this.time = this.$moment().format('YYYY-MM-DD，HH:mm:ss，a')
        setInterval(() => {
          this.time = this.$moment().format('YYYY-MM-DD， HH:mm:ss，a')
        }, 1000)
      },
      incomingProjectNode (obj) {
        switch (obj.type) {
          // 环境预警
          case 17:
            this.weatherForecast()
            break
          // 环境报警
          case 18:
            this.weatherForecast()
            break
          // 报警消失
          case 22:
            this.weatherForecast()
            break
        }
        /*
        * status 消息状态
        * 1 普通消息
        * 2 预警消息
        * 3 报警消息
        * 4 取消报警
        * 5 视屏监控报警 滚动 不固定
        * 6 视屏监控预警 滚动 不固定
        * */
      },
      weatherForecast () {
        const data = {
          'stageId': this.currentUser.stageId,
          'pjId': this.currentUser.pjId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/screen/weatherForecast`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          if (res.data.errorMsg) {
            this.$message.error(res.data.errorMsg)
          } else {
            this.isPmTwoWarning = false
            this.isPmTwoAlarm = false
            this.isPmTenWarning = false
            this.isPmTenAlarm = false
            if (res.data.data.environmentalInfo) {
              this.environmentalInfo = res.data.data.environmentalInfo
              let {noiseWarn, noiseAlarm, pmTenAlarm, pmTenWarn, pmTwoPointFiveAlarm, pmTwoPointFiveWarn} = res.data.data
              pmTenAlarm = Number.parseInt(pmTenAlarm)
              pmTenWarn = Number.parseInt(pmTenWarn)
              pmTwoPointFiveAlarm = Number.parseInt(pmTwoPointFiveAlarm)
              pmTwoPointFiveWarn = Number.parseInt(pmTwoPointFiveWarn)
              this.noiseWarn = Number.parseInt(noiseWarn)
              this.noiseAlarm = Number.parseInt(noiseAlarm)
              if (this.environmentalInfo.noise > this.noiseWarn && this.environmentalInfo.noise < this.noiseAlarm) {
                this.noiseColor = '#ffc600'
              }
              if (this.environmentalInfo.noise > this.noiseAlarm) {
                this.noiseColor = '#fb6161'
              }
              if (this.environmentalInfo.pmTen > pmTenWarn && this.environmentalInfo.pmTwoPiontFive < pmTenAlarm) {
                this.isPmTenWarning = true
              }
              if (this.environmentalInfo.pmTen > pmTenAlarm) {
                this.isPmTenAlarm = true
              }
              if (this.environmentalInfo.pmTwoPiontFive > pmTwoPointFiveWarn && this.environmentalInfo.pmTwoPiontFive < pmTwoPointFiveAlarm) {
                this.isPmTwoWarning = true
              }
              if (this.environmentalInfo.pmTwoPiontFive > pmTwoPointFiveAlarm) {
                this.isPmTwoAlarm = true
              }
              this.pmTenWidth = this.environmentalInfo.pmTen / Number.parseInt(pmTenAlarm) * 100
              this.pmTwoPointFiveWidth = this.environmentalInfo.pmTwoPiontFive / Number.parseInt(pmTwoPointFiveAlarm) * 100
            } else {
              Object.assign(this.$data, this.$options.data())
            }
            this.todayWeather = res.data.data.weather || {}
          }
        })
      }
    }
  }
</script>

<style scoped lang='scss'>
  .weather-day{
    margin-top: 20px;
    height: 57px;
    .todayWeather-time{
      font-size: 12px;
      margin: 10px 0 0 15px;
    }
  }
  .weather-pm{
    margin-top: 20px;
    height: 50px;
    >div{
      width: 190px;
    }
    .weather-pm10{
      width: 28px;
      height: 27px;
      background-image: url("/static/images/bgy-pm10.png");
    }
    .weather-text{
      color: #fff;
      line-height: 27px;
    }
    .weather-pm10-bar{
      margin-top: 10px;
      width: 100%;
      height: 14px;
      overflow: hidden;
      .weather-pm10-com{
        top: 0;
        left: 0;
        height: 14px;
      }
    }
    .weather-normal-bar{
      background: linear-gradient(to right, rgba(23, 90, 99, 0.7), rgba(32, 96, 82, 0.9));
      >div{
        background: linear-gradient(to right, #2bcddd, #54ea93);
      }
    }
    .weather-warning-bar{
      background: linear-gradient(to right, rgba(255, 228, 0, 0.3), rgba(255, 198, 0, 0.3));
      >div{
        background: linear-gradient(to right, #ffe400, #ffc12b);
      }
    }
    .weather-alarm-bar{
      background: linear-gradient(to right, rgba(251, 123, 123, 0.3), rgba(251, 97, 97, 0.3));
      >div{
        background: linear-gradient(to right, #fb7d7d, #fb6161);
      }
    }
    .weather-pm25{
      width: 29px;
      height: 27px;
      background-image: url("/static/images/bgy-opm2.5.png");
    }
    .weather-normal{
      width: 100px;
      height: 27px;
      >i{
        color: #2bcddd;
        font-size: 24px;
      }
      .icontDes{
        color: #2bcddd;
        font-size: 14px;
        vertical-align: text-top;
        padding-left: 5px;
      }
    }
    .weather-warning-icon{
      >i{
        color: #ffe400;
      }
      .icontDes{
        color: #ffe400;
      }
    }
    .weather-alarm-icon{
      >i{
        color: #fb7d7d;
      }
      .icontDes{
        color: #fb7d7d;
      }
    }
    .weather-pm25-bar{
      margin-top: 10px;
      width: 100%;
      height: 14px;
      overflow: hidden;
      .weather-pm25-com{
        top: 0;
        left: 0;
        height: 14px;
      }
    }
  }
  .weather-other{
    height: 35px;
    margin-top: 25px;
    >div{
      text-align: center;
    }
  }
  .weather-after{
    line-height: 30px;
    margin-top: 20px;
  }
</style>
